<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form class="form-inline" id="specForm">

		<div class="container">

			<div class="row">
				<!-- 一列 -->
				<div class="col-md-5">

					<div class="form-group mx-sm-3 mb-2">
						<label for="inputPassword2" class="sr-only">Password</label> <input type="text" name="specName" class="form-control" id="inputPassword2" placeholder="请输入规格名称">
						<button type="button" class="btn btn-primary mb-2" onclick="addLines()">添一行</button>
					</div>
				</div>
				<!-- 二列 -->
				<div class="col-md-7" id="lineId">
					
					<div class="form-group mx-sm-3 mb-2">
						<label for="inputPassword2" class="sr-only"></label> <input type="text" name="optionList[0].optionName" class="form-control" id="inputPassword2" placeholder="规格选项名">
						<label for="inputPassword2" class="sr-only"></label> <input type="number" name="optionList[0].orders" class="form-control" id="inputPassword2" placeholder="排序">
						<button type="button" class="btn btn-danger" onclick="delLines($(this))">删除一行</button>
					</div>
					
				</div>

			</div>

		</div>

		<button type="button" onclick="sbmForm()" class="btn btn-primary mb-2">添加</button>

	</form>
</body>

<script type="text/javascript">
	//添加提交表单
	function sbmForm(){
		$.post("./spec/add",$("#specForm").serialize(),function(resp){
			if(resp){
				alert("success");
				$("#workArea").load("./spec/list");
			}else{
				alert("fail!!")
			}

		})
			
	}
	

// 删除一行
	function delLines(obj){
		obj.parent().remove();
	}


	var index =1;
//	添加一行
	function addLines(){

		$("#lineId").append('<div class="form-group mx-sm-3 mb-2">'+
				'<label for="inputPassword2" class="sr-only">Password</label> <input type="text" name="optionList['+index+'].optionName" class="form-control" id="inputPassword2" placeholder="规格选项名">'+
				'<label for="inputPassword2" class="sr-only">Password</label> <input type="number" name="optionList['+index+'].orders" class="form-control" id="inputPassword2" placeholder="排序">'+
				'<button type="button" class="btn btn-danger" onclick="delLines($(this))">删除一行</button>'+
			'</div>')
		index++;
	}

</script>
</html>